<template>
  <div>
    <div id="box">{{ num }}</div>
    <button @click="change">修改</button>
    <div>姓名 <input v-model="info.username" /></div>
    <div>年龄 <input v-model="info.userage" /></div>
    <button @click="getValue">取值</button>
    <hr />
    <div>姓名 <input v-model="username" /></div>
    <div>年龄 <input v-model="info2.userage" /></div>
    <button @click="getValue2">取值</button>

    {{ count + 1 }}
    {{ object.id + 1 }}
    <hr />
    <div>第一个名字 <input v-model="firstName" /></div>
    <div>第二个名字 <input v-model="secondName" /></div>
    <div>{{ fullName }}</div>
    <div>{{ getFullName() }}</div>

    <div>
      {{ msg }}
      <searchInput :msg="msg" @changeMsg="changeMsg"></searchInput>
    </div>
  </div>
</template>

<script setup>
import {
  ref,
  reactive,
  onMounted,
  nextTick,
  onServerPrefetch,
  computed,
  watch,
  onRenderTracked
} from 'vue'
import searchInput from '../components/searchInput.vue'

let firstName = ref('')
let secondName = ref('')
let fullName = computed(() => {
  console.log('缓存')
  return firstName.value + secondName.value
})
let getFullName = () => {
  console.log('方法')
  return firstName.value + secondName.value
}

let msg = ref('')

let changeMsg = (value) => {
  msg.value = value
}
watch(msg, () => {
  console.log('子组件中的值为' + msg.value)
})

let num = ref(10)

let change = () => {
  num.value++
  console.log(num.value)
  nextTick(() => {
    console.log(document.getElementById('box').innerHTML)
  }, 0)
}

let info = ref({
  username: 'leson',
  userage: 18
})

let getValue = () => {
  console.log(info.value)
  console.log(info.value.username)
  console.log(info.value.userage)
}
let getValue2 = () => {
  console.log(info2)
  console.log(info2.username)
  console.log(info2.userage)
}
let info2 = reactive({
  username: 'lili',
  userage: 19
})
let { username } = info2

const count = ref(0)
const object = { id: ref(1) }

onRenderTracked((info) => {
  console.log(info)
})
onMounted(() => {
  console.log('a')
})
onServerPrefetch(() => {
  console.log('b')
  setTimeout(() => {
    console.log('c')
  })
})
</script>

<style></style>
